<!--事故统计线性-->
<template>
  <div class="com-container">
    <div class="com-chart" ref="line_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null, //服务器返回的数据
      timeId: null, //定时器id
    };
  },
  props: {
    fenqu: String,
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    clearInterval(this.timeId);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.line_ref, "chalk");
      const initOption = {
        backgroundColor: "", //设置无背景色
        tooltip: {
          trigger: "axis",
        },
        legend: {
          textStyle: {
            color: "#4c9bfd", // 图例文字颜色
          },
          top: "1%",
          right: "10%", //距离右边10%
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true, // 包含刻度文字在内
        },

        //     - 刻度去除
        // - x轴刻度标签字体颜色：#4c9bfd
        // - 剔除x坐标轴线颜色（将来使用Y轴分割线)
        // - 轴两端是不需要内间距 boundaryGap
        xAxis: {
          type: "category",
          boundaryGap: false, // 去除轴内间距
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
        },
        //     - 刻度去除
        // - 字体颜色：#4c9bfd
        // - 分割线颜色：#012f4a
        yAxis: {
          type: "value",
          axisTick: {
            show: false, // 去除刻度
          },
          axisLabel: {
            color: "#4c9bfd", // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a", // 分割线颜色
            },
          },
        },
        color: ["#00f2f1", "#ed3f35", "#ffd200"],
      };
      this.chartInstance.setOption(initOption);
    },
    async getData() {
      const res = await this.$http.get("/ai/month_warn", {
        params: {
          fenqu: this.fenqu,
        },
      });
      this.allData = res.data;
      //   console.log(this.allData);
      this.updateChart();
    },
    updateChart() {
      const fault = this.allData.map((item) => item.fault);
      const illegal = this.allData.map((item) => item.illegal);
      const too_much = this.allData.map((item) => item.too_much);
      const dataOption = {
        series: [
          {
            name: "异常行为",
            data: fault,
            type: "line",
            // 折线修饰为圆滑
            smooth: true,
          },
          {
            name: "违章行为",
            data: illegal,
            type: "line",
            smooth: true,
          },
          {
            name: "聚集报警",
            data: too_much,
            type: "line",
            smooth: true,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = (this.$refs.line_ref.offsetWidth / 100) * 3.6;

      //   this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>

<style>
</style>